<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页标题 -->
    <title>击剑动作分析系统</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        input[type="file"], select, input[type="number"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .button-row {
            display: flex;
            justify-content: space-between; /* 添加间距 */
            width: 100%;
            margin-top: 20px;
        }

        button {
            background-color: #868e96;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background-color: #1e1e1e;
        }
        video {
            width: 100%;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>



<body>
    <div class="container">
        <h1 style="margin: 10px;">击剑动作分析</h1>
    <!-- 创建uploadForm表单，收集用户信息 -->

    <form id="uploadForm" style="margin: 10px;"
    action="/upload" method="post" enctype="multipart/form-data">
        <!-- 收集video文件 -->
        <label for="videoInput">选择视频:</label>

        <!-- 增加style -->
        <input type="file" style="color: brown;" id="videoInput" name="video" accept="video/*" 
required><br><br>
<!-- 添加画布用于显示实时分析结果 -->

    <!-- 增加视频预览 -->
    <div class="preview-container">
        <h3 style="margin-top: 5px;">视频预览</h3>
        <video id="videoPreview" class="preview-video" controls></video>
        <div id="videoInfo" class="file-info"></div>
    </div>
        <!-- 设置下拉选择菜单，收集人物位置 -->

        <label style="margin: -5px; padding-top: 20px;" for="sideInput">选择人物位置:</label>
        <select id="sideInput" name="side">
            <option value="0">单人视频</option>
            <option value="1">左边人物</option>
            <option value="2">右边人物</option>
        </select><br><br>
        <!-- 设置数字输入，收集用户身高 -->
        <label style="margin: -5px; margin-top: 10px;" for="heightInput">输入身高 (cm):</label>
        <input type="number" id="heightInput" name="height" 
value="170" required><br><br>


        <!-- 创建*上传视频*按钮，点击后运行submitForm函数      增加style-->
        <button style="margin: 8px;" type="button" onclick="submitForm('competition')">比赛分析</button>
        <button style="margin: 8px;" type="button" onclick="submitForm('analysis')">动作分析</button>
    
    </form>
     <!-- 结束表单 -->
    </div>



    <!-- <div class="results" id="resultsSection" style="background-color: 
     #f5f5f5; padding: 20px; margin: 10px; margin-top: 20px; width: 350px;">
        <h2 style="margin-top: 10px;">数据分析</h2>
        <div id="dataAnalysis">
            进攻次数： <span id="attacksCount"></span><br>
            移动距离： <span id="sumDistance"></span>    右手夹角： <span id="rightHandAngle"></span><br>
            右脚夹角： <span id="rightAnkleAngle"></span>   左脚夹角： <span id="leftAnkleAngle"></span><br>
            右膝夹角： <span id="rightKneeAngle"></span>   左膝夹角： <span id="leftKneeAngle"></span><br>
            右肩坐标： <span id="rightShoulder"></span> 左肩坐标： <span id="leftShoulder"></span><br>
            右臂坐标： <span id="rightArm"></span> 左臂坐标： <span id="leftArm"></span>
        </div>
    </div> -->

    <!-- <h2>数据分析</h2>
    <div id="dataAnalysis">
        进攻次数： <span id="attacksCount"></span><br>
        移动距离： <span id="sumDistance"></span>    右手夹角： <span id="rightHandAngle"></span><br>
        右脚夹角： <span id="rightAnkleAngle"></span>   左脚夹角： <span id="leftAnkleAngle"></span><br>
        右膝夹角： <span id="rightKneeAngle"></span>   左膝夹角： <span id="leftKneeAngle"></span><br>
        右肩坐标： <span id="rightShoulder"></span> 左肩坐标： <span id="leftShoulder"></span><br>
        右臂坐标： <span id="rightArm"></span> 左臂坐标： <span id="leftArm"></span>
    </div> -->


    <script>
        // 视频预览
        document.getElementById('videoInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const videoURL = URL.createObjectURL(file);
                document.getElementById('videoPreview').src = videoURL;
            }
        });


        // function changeButtonType(type) {
        //     document.getElementById('buttonType').value = type;
        //     document.getElementById('uploadForm').submit();
        // }


        function submitForm(buttonType) {
            const formData = new FormData(document.getElementById('uploadForm'));
            formData.append('button_type', buttonType);

            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (buttonType === 'competition') {
                    window.location.href = `/competition?video_path=${encodeURIComponent(data.video_path)}
                    &side=${data.side}
                    &height=${data.height}`;
                    
                } else if (buttonType === 'analysis') {
                    window.location.href = `/analysis?video_path=${encodeURIComponent(data.video_path)}
                    &side=${data.side}
                    &height=${data.height}`;
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }




        // function updateData(data) {
        //     document.getElementById('attacksCount').textContent = 
        //     data.attacks_count;
        //     document.getElementById('sumDistance').textContent = 
        //     data.sum_distance;
        //     document.getElementById('rightHandAngle').textContent = 
        //     data.right_hand_angle;
        //     document.getElementById('rightAnkleAngle').textContent = 
        //     data.right_ankle_angle;
        //     document.getElementById('leftAnkleAngle').textContent = 
        //     data.left_ankle_angle;
        //     document.getElementById('rightKneeAngle').textContent = 
        //     data.right_knee_angle;
        //     document.getElementById('leftKneeAngle').textContent = 
        //     data.left_knee_angle;
        //     document.getElementById('rightShoulder').textContent = 
        //     data.right_shoulder;
        //     document.getElementById('leftShoulder').textContent = 
        //     data.left_shoulder;
        //     document.getElementById('rightArm').textContent = 
        //     data.right_hip;
        //     document.getElementById('leftArm').textContent = 
        //     data.left_hip;
        // }


            


        // 设置定时器，每秒向服务器请求最新数据
        // setInterval(() => {
        //     fetch('/data')
        //     .then(response => response.json())
        //     .then(data => {
        //         // updateData(data);
        //     })
        //     .catch(error => {
        //         console.error('Error:', error);
        //     });
        // }, 1000); // 每秒更新一次数据

    </script>
</body>
</html>